<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_1474698_wmiux114gz8.css">
    <title>Document</title>
    <style>
        *{
            margin: 0;
        }
       




        .v-condition{
            width: 100%;
            height: 70px;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .v-condition .item{
            width: auto;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size:14px;
        }
        .v-condition .item .up-bt{
            width: auto;
            height: 100%;
            display: flex;
            flex-direction:column;
            justify-content: center;
            align-items: center;
            color: #ccc;
        }
        .v-condition .item .up-bt .iconf111{
            position: relative;
            bottom: -7px;
        }
        .v-condition .item .up-bt .iconf11{
            position: relative;
            bottom: 2px;
        }
    </style>
</head>
<body>
    
    <div id="root">
        <v-condition @changetype="typechange" activecolor="#956565"></v-condition>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        //封装公共筛选器
        window.onload = function(){
            Vue.component('v-condition',{
                template:'<div class="v-condition"><div class="item" :class="{active:currentIdx == 1}" @click="changeMethods(1)">{{list[0]}}</div>'
                            +'<div class="item " :class="{active:currentIdx == 2 || currentIdx == 3}" @click="changeMethods(2)">'
                            +'<span>{{list[1]}}</span><div class="up-bt"><i class="iconfont iconf111" :class="{active:currentIdx == 2}"></i>'
                            +'<i class="iconfont iconf11"  :class="{active:currentIdx == 3}"></i></div></div>'
                            +'<div class="item"><span>{{list[2]}}</span>'
                            +'<div class="up-bt" :class="{active:currentIdx == 4 || currentIdx == 5}" @click="changeMethods(4)">'
                            +'<i class="iconfont iconf111" :class="{active:currentIdx == 4}"></i><i class="iconfont iconf11" :class="{active:currentIdx == 5}"></i>'
                            +'</div></div></div>',
                data:function(){
                    return{currentIdx:1}
                },
                props:{
                    list:{type:Array,default:function(){return ['综合','销量','价格']}},
                    activecolor:{type:String,default:"red"} //激活色
                },
                mounted:function(){
                    var style = document.createElement('style');
                    style.innerHTML = '.v-condition .active{color: '+this.activecolor+'}';
                    document.head.appendChild(style);
                },
                methods:{
                    changeMethods:function(type){
                        var _this = this;
                        if (type == 1) {_this.currentIdx = type;}else if(type == 2){
                            if (_this.currentIdx == 2) {
                                _this.currentIdx = 3;
                            } else {
                                _this.currentIdx = 2;
                            }
                        }else if(type == 4){
                            if (_this.currentIdx == 4) {
                                _this.currentIdx = 5;
                            } else {
                                _this.currentIdx = 4;
                            }
                        };
                        _this.$emit('changetype',_this.currentIdx)
                    },
                },
            })
            var root = new Vue({
                el:"#root",
                data:{
                   currentIdx:1,
                },
                mounted:function(){},
                methods:{
                    typechange:function(e){
                        console.log(e)
                    },
                },
            })
        }
    
    
    </script>
</body>
</html>